<template>
    <div class="common-bottom-box clearfix">
        <div class="fl" style="width: 231px;height: 30px;"></div>
        <div class="content-right-box fl" style="position: relative;">
            
            <div class="clearfix">
                <!-- PC蛋蛋 -->
                <ul class="two-level-menu clearfix" v-if="nowlotteryid == 1">
                    <li v-for="(item,index) in levelmenu1" :key="index">
                        <router-link @click.native="levelmenuFun" :to="{ path: '/gamedetail', query: { id: nowlotteryid,levelid: item.id }}">{{item.name}}</router-link>
                    </li>
                </ul>
                <!-- 六合彩 -->
                <ul class="two-level-menu clearfix" v-if="nowlotteryid == 2">
                    <li v-for="(item,index) in levelmenu2" :key="index">
                        <router-link @click.native="levelmenuFun" :to="{ path: '/gamedetail', query: { id: nowlotteryid, levelid: item.id }}">{{item.name}}</router-link>
                    </li>
                </ul>
                <!-- 北京PK拾、幸运飞艇 -->
                <ul class="two-level-menu clearfix" v-if="nowlotteryid == 3 || nowlotteryid == 5">
                    <li v-for="(item,index) in levelmenu3" :key="index">
                        <router-link @click.native="levelmenuFun" :to="{ path: '/gamedetail', query: { id: nowlotteryid, levelid: item.id }}">{{item.name}}</router-link>
                    </li>
                </ul>
                <!-- 北京快乐8 -->
                <ul class="two-level-menu clearfix" v-if="nowlotteryid == 4">
                    <li v-for="(item,index) in levelmenu4" :key="index">
                        <router-link @click.native="levelmenuFun" :to="{ path: '/gamedetail', query: { id: nowlotteryid,levelid: item.id }}">{{item.name}}</router-link>
                    </li>
                </ul>
                <!-- 天津时时彩、新疆时时彩、重庆时时彩 -->
                <ul class="two-level-menu clearfix" v-if="nowlotteryid == 6 || nowlotteryid == 7 || nowlotteryid == 8">
                    <li v-for="(item,index) in levelmenu5" :key="index">
                        <router-link @click.native="levelmenuFun" :to="{ path: '/gamedetail', query: { id: nowlotteryid,levelid: item.id }}">{{item.name}}</router-link>
                    </li>
                </ul>
                <!-- 安徽快3、江苏快3 -->
                <ul class="two-level-menu clearfix" v-if="nowlotteryid == 9 || nowlotteryid == 10 || nowlotteryid == 16">
                    <li v-for="(item,index) in levelmenu6" :key="index">
                        <router-link @click.native="levelmenuFun" :to="{ path: '/gamedetail', query: { id: nowlotteryid,levelid: item.id }}">{{item.name}}</router-link>
                    </li>
                </ul>
                <!-- 山东11选5、广东11选5、江西11选5 -->
                <ul class="two-level-menu clearfix" v-if="nowlotteryid == 11 || nowlotteryid == 12 || nowlotteryid == 13">
                    <li v-for="(item,index) in levelmenu7" :key="index">
                        <router-link @click.native="levelmenuFun" :to="{ path: '/gamedetail', query: { id: nowlotteryid,levelid: item.id }}">{{item.name}}</router-link>
                    </li>
                </ul>
                <!-- 广东快乐十分、重庆幸运农场 -->
                <ul class="two-level-menu clearfix" v-if="nowlotteryid == 14 || nowlotteryid == 15">
                    <li v-for="(item,index) in levelmenu8" :key="index">
                        <router-link @click.native="levelmenuFun" :to="{ path: '/gamedetail', query: { id: nowlotteryid,levelid: item.id }}">{{item.name}}</router-link>
                    </li>
                </ul>
                <div class="game-box">
                    <div class="game-main-box">
                        <router-view v-if="routerAlive"></router-view>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    
</template>
<style>
    html,body{
        background: #fff!important;
    }
</style>
<script>
    import '../../assets/css/game.css'
    export default {
        data(){
            return{
                nowlotteryid: '',  //当前票种id
                levelmenu1: [
                    {name: 'PC蛋蛋',id: 1,},
                ],
                levelmenu2: [
                    {name: '特码',id: 1,},
                    {name: '特肖',id: 2,},
                    {name: '特码头尾数',id: 3,},
                    {name: '两面',id: 4,},
                    {name: '色波',id: 5,},
                    {name: '七色波',id: 6,},
                    {name: '正码',id: 7,},
                    {name: '正码特',id: 8,},
                    {name: '正码1~6',id: 9,},
                    {name: '平特一肖尾数',id: 10,},
                    {name: '五行',id: 11,},
                    {name: '合肖',id: 12,},
                    {name: '正肖',id: 13,},
                    {name: '总肖',id: 14,},
                    {name: '自选不中',id: 15,},
                    {name: '连肖',id: 16,},
                    {name: '连尾',id: 17,},
                    {name: '连码',id: 18,},
                    {name: '过关',id: 19,},
                    {name: '生肖双面',id: 20,},
                ],
                levelmenu3: [
                    {name: '两面盘',id: 1,},
                    {name: '1~10名',id: 2,},
                    {name: '冠亚组合',id: 3,},
                ],
                levelmenu4: [
                    {name: '总和、比数、五行',id: 1,},
                    {name: '正码',id: 2,},
                ],
                levelmenu5: [
                    {name: '两面盘',id: 1,},
                    {name: '1~5',id: 2,},
                    {name: '第一球',id: 3,},
                    {name: '第二球',id: 4,},
                    {name: '第三球',id: 5,},
                    {name: '第四球',id: 6,},
                    {name: '第五球',id: 7,},
                ],
                levelmenu6: [
                    {name: '大小骰宝',id: 1,},
                ],
                levelmenu7: [
                    {name: '两面盘',id: 1,},
                    {name: '单号',id: 2,},
                    {name: '连码',id: 3,},
                    {name: '直选',id: 4,},
                ],
                levelmenu8: [
                    {name: '两面盘',id: 1,},
                    {name: '第一球',id: 2,},
                    {name: '第二球',id: 3,},
                    {name: '第三球',id: 4,},
                    {name: '第四球',id: 5,},
                    {name: '第五球',id: 6,},
                    {name: '第六球',id: 7,},
                    {name: '第七球',id: 8,},
                    {name: '第八球',id: 9,},
                    {name: '正码',id: 10,},
                    {name: '连码',id: 11,},
                ],
                routerAlive: true,  //渲染状态
            }
        },
        methods: {
            //票种对应id  1:PC蛋蛋   2:六合彩  3：北京PK拾  4：北京快乐8  5：幸运飞艇  6：天津时时彩  7：新疆时时彩  8：重庆时时彩  
            //  9：安徽快3  10：江苏快3  11：山东11选5  12：广东11选5  13：江西11选5  14：广东快乐十分  15：重庆幸运农场
            init(){

                if(this.$route.query.id){
                    this.nowlotteryid = this.$route.query.id;
                    if(!this.$route.query.levelid){
                        
                        //默认跳转路由
                        this.$router.push({
                            path:'/gamedetail',
                            query:{
                                id: this.$route.query.id,
                                levelid: 1,
                            }
                        })
                    }
                    
                }

            },
            //二级菜单切换
            levelmenuFun(){
                // 刷新路由
                this.routerAlive = false;
                this.$nextTick(()=>{
                    this.routerAlive = true;
                });
            },
            
        },
        mounted(){
            this.init();
        },
    }
</script>
